
div{
    /* 盒子模型改为边框盒子 */
    box-sizing: border-box;
    font-size: 26px;
    color: red;
    /* 加粗 */
    font-weight: 700;
    text-align: center;
    /* 斜体 */
    font-style: italic;
}
.main{
    /* border: 1px solid green; */
    /* 设置页面宽高为视口宽高 */
    /* vw，vh是相对单位 相对于浏览器的视口宽高 */
    width: 100vw;
    height: 100vh;
}
.header{
    /* border: 1px solid red; */
    background-color: #F6ACA3;
    /* 它的父元素main的100% */
    width: 100%;
    height: 10%;
    color: white;
    /* 字体大小 */
    /* font-size: 50px; */
    /* 字体大小响应式 */
    font-size: 5vh;
    /* js处理 弹性适配 */
    /* 最小12px，适中5vh,最大48px */
    /* font-size: clamp(12px,5vh,48px); */
}
.text{
    /* 垂直居中 */
    /* line-height: 10%; */
    /* vertical-align: middle; */
    /* 使用paddding调节 */
    /* padding-top: 2px; */
    /* 使用布局调节 flex布局 */
    display: flex;
    /* flex布局 元素垂直居中 */
    align-items: center;
    /* flex布局 元素水平居中 */
    justify-content: center;
}
.content{
    /* border: 1px solid red; */
    width: 100%;
    height: 85%;
}
.contentleft,.contentright{
    /* border: 1px solid blue; */
    /* display: inline-block; */
    height: 100%;
}
.contentleft{
    background-color: rgba(139, 243, 208, 0.834);
    width: 30%;
    /* 浮动布局-左浮动 */
    float: left;
}
.contentright{
    background-color: bisque;
    width: 70%;
    /* 浮动布局-右浮动 */
    float: right;
}
.up,.down{
    /* border: 1px solid rgb(72, 72, 132); */
    height: 50%;
}
.up{
    background-color: rgba(178, 105, 246, 0.64);
}
.down{
    background-color: azure;
}
.footer{
    /* border: 1px solid red; */
    background-color: #a2ef7b;
    width: 100%;
    height: 5%;
    color: rgb(58, 57, 57);
    font-size: 2vh;

}